<template>
  <div>
      <el-row>
        <el-col :span="5" class="layout-menu-left">
          <div class="dataSource">
            <!-- 树形控件 -->
            <el-tree class="elTree" :data="data" ref="tree" :props="defaultProps" @node-click="handleNodeClick" node-key="id" default-expand-all></el-tree>
          </div>
          <div class="buttonGroup">
            <!-- 对于模型包中元模型的增删改 -->
            <el-button  type="primary" plain icon="el-icon-plus" size="small" @click="metaModelAdd">增加</el-button >
            <el-button  type="primary" plain icon="el-icon-minus" size="small" @click="metaModelDelete" >删除</el-button >
            <el-button  type="primary" plain icon="el-icon-plus" size="small" @click="metaModelModify" >修改</el-button >
          </div>
        </el-col>
        <el-col :span="1">
          &nbsp;
        </el-col>
        <div>
          <!-- 新增元模型的弹出框 -->
          <el-dialog title="添加元模型" :visible.sync="dialogMetaModelAdd">
            <el-form :model="MetaModelAdd">
              <el-form-item label="选择模型包：" :label-width="formLabelWidth">
                <el-select v-model="MetaModelAdd.value" placeholder="请选择">
                  <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="元模型名称：" :label-width="formLabelWidth">
                <el-input v-model="MetaModelAdd.name" id='inputModel' autosize placeholder="请输入元模型名称" auto-complete="off"></el-input>
              </el-form-item>

              <el-form-item label="元模型描述：" :label-width="formLabelWidth">
                <el-input v-model="MetaModelAdd.description" id='inputModel' autosize placeholder="请输入元模型描述" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogMetaModelAdd = false">取 消</el-button>
              <el-button type="primary" @click="metaModelInsert">确 定</el-button>
            </div>
          </el-dialog>

          <!-- 修改元模型的弹出框 -->
          <el-dialog title="元模型(包)名称" :visible.sync="dialogMetaModelModify">
            <el-form :model="MetaModelModify">

              <el-form-item label="元模型(包)名称：" :label-width="formLabelWidth">
                <el-input v-model="MetaModelModify.name" id='inputModel' autosize placeholder="" auto-complete="off"></el-input>
              </el-form-item>

              <el-form-item label="元模型(包)描述：" :label-width="formLabelWidth">
                <el-input v-model="MetaModelModify.description" id='inputModel' autosize placeholder="" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogMetaModelModify = false">取 消</el-button>
              <el-button type="primary" @click="metaModelModifyPost">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      <el-col  :span="18">
        <div class="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right" class="des">
            <el-breadcrumb-item :to="{ path: '/dashboard/MetaModelManagement/MetaModel' }">系统模型包
            </el-breadcrumb-item>
            <el-breadcrumb-item>关系数据库元模型</el-breadcrumb-item>
            <el-breadcrumb-item>表字段</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="decorationLine"></div>
        <div class="table1">
          <el-row>
            <span class="des">属性列表</span>
            <el-button type="primary" class="attributeAdd" icon="el-icon-edit" plain @click="attributeAdd">增加</el-button>
          </el-row>
          <br/>
          <el-row>
            <el-table
                :data="tableData"
                border
                style="width: 100%">
              <el-table-column
                fixed
                prop="attribute"
                label="属性名"
                width="150">
              </el-table-column>
              <el-table-column
                prop="type"
                label="类型"
                width="150">
              </el-table-column>
              <el-table-column
                prop="description"
                label="说明">
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="attributeModify(scope.row)" type="text" size="small">修改</el-button>
                  <el-button @click="attributeDelete(scope.row)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>

      <!-- 新增属性 -->
      <el-dialog title="新增属性" :visible.sync="dialogAttributeAdd">
        <div style="margin: 10px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="addAtrribute">
          <el-form-item label="属性名称:">
            <el-input v-model="addAtrribute.name" placeholder="请输入属性名称"></el-input>
          </el-form-item>

          <el-form-item label="类型:" >
            <el-select v-model="addAtrribute.type" placeholder="请选择类型">
              <el-option
                v-for="item in types"
                :key="item.label"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="描述:">
            <el-input v-model="addAtrribute.description" placeholder="请输入属性的描述"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAttributeAdd = false">取 消</el-button>
          <el-button type="primary" @click="attributeAddPost">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 修改属性 -->
      <el-dialog title="修改属性" :visible.sync="dialogAttributeModify">
        <div style="margin: 10px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="modifyAtrribute">
          <el-form-item label="属性名称:">
            <el-input v-model="modifyAtrribute.name" ></el-input>
          </el-form-item>

          <el-form-item label="类型:" >
            <el-select v-model="modifyAtrribute.type" >
              <el-option
                v-for="item in types"
                :key="item.label"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="描述:">
            <el-input v-model="modifyAtrribute.description" ></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAttributeModify = false">取 消</el-button>
          <el-button type="primary" @click="attributeModifyPost">确 定</el-button>
        </div>
      </el-dialog>
    </el-col>

  </el-row>
</div>
</template>

<script>

import axios from 'axios'
import qs from 'qs'

  export default {

    created () {
      this.initData()
    },
    methods: {
      // 通过元模型路由传过来的参数实例化tree控件
      initData() {
        this.data = this.$route.params.metaMedelData

      },
      // 在元模型标签的点击事件，用于获取tree控件的数据
      MetaDataAction () {
            // console.log(key, keyPath);
            let vm = this
            axios.get('metamodel_hierarchy/getMetamodelPackageTree')
            .then(function (response) {
                console.log(response)
                console.log(response.data.data)
                // if (response.data.result == true) {
                //     vm.$router.push({
                //         name: '元模型',
                //         params: {
                //           metaMedelData: response.data.data
                //
                //       }
                //   })
                // } else {
                //     vm.$router.push({
                //         name: '元模型',
                //         params: {
                //           metaMedelData: ' '
                //       }
                //   })
                // }
            })
            .catch(function (error) {
                console.log(error);
            });
        },
      // 模型包中元模型的增删改
      metaModelAdd() {
        this.dialogMetaModelAdd = true;
        this.MetaModelAdd= {
          name: '',
          description: '',
          value: '',
        };
        let params = {
          id: 9
        }
        let vm = this;
        axios.post('metamodel_hierarchy/getSonMetamodel_hierarchy', params)
        .then(function (response) {
          console.log(response)
          console.log(response.data)
          vm.options = response.data.data;

        })
        .catch(function (error) {
          console.log(error);
        });

      },
      metaModelInsert() {

        let vm = this;
        let params = {
          id: this.MetaModelAdd.value,
          name: this.MetaModelAdd.name,
          desc: this.MetaModelAdd.description,
        }
        axios.post('metamodel_hierarchy/insertMetamodel', params)
        .then(function (response) {
           console.log(response)
          if(response.data.result == true){
            vm.$message('新增元模型成功');
            vm.dialogMetaModelAdd = false;
            axios.get('metamodel_hierarchy/getMetamodelPackageTree')
            .then(function (response) {
              if (response.data.result == true) {
                vm.data = response.data.data;
              } else {
                vm = [];
              }
            })
            .catch(function (error) {
              console.log(error);
            });
          }
          else
            vm.$message('新增元模型失败，不要和已有元模型重名');

        })
        .catch(function (error) {
          console.log(error);
        });
      },
      metaModelDelete() {
        let vm = this;
        let params = {
          id: vm.$refs.tree.getCurrentKey(),
        }
        if(vm.$refs.tree.getCurrentKey() != null) {
          this.$confirm('此操作将永久删除该元模型,若是模型包，则删除该模型包以及所有子元模型?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {

            axios.post('metamodel_hierarchy/deleteMetamodel_hierarchy', params)
            .then(function (response) {

            if(response.data.result == true){
              vm.$message('删除元模型成功');
              // 删除元模型之后再刷新tree控件
              axios.get('metamodel_hierarchy/getMetamodelPackageTree')
              .then(function (response) {
                console.log(response)
                console.log(response.data.data)
                if (response.data.result == true) {
                  vm.data = response.data.data;
                } else {
                  vm = [];
                }
              })
              .catch(function (error) {
                console.log(error);
              });
            }
            else
              vm.$message('删除元模型失败')
            })
            .catch(function (error) {
              console.log(error);
            });

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        } else {
          this.$message({
            showClose: true,
            message: '请选择元模型'
          });
        }
      },
      metaModelModify() {
        // 清空
        this.MetaModelModify = {
          name: '',
          description: '',
        }
        let vm = this;
        let params = {
          id: vm.$refs.tree.getCurrentKey(),
        }

        if(vm.$refs.tree.getCurrentKey() != null) {

          axios.post('metamodel_hierarchy/getMetamodel_hierarchyAttribute', params)
          .then(function (response) {
            console.log(response)
            vm.MetaModelModify.name = response.data.data.name;
            vm.MetaModelModify.description = response.data.data.describle;
          })
          .catch(function (error) {
            console.log(error);
          });
          this.dialogMetaModelModify = true;


        } else {
          this.$message({
            showClose: true,
            message: '请选择元模型'
          });
        }
      },
      metaModelModifyPost() {
        let vm =this;
        let params = {
          id: vm.$refs.tree.getCurrentKey(),
          name: vm.MetaModelModify.name,
          description: vm.MetaModelModify.description
        }
        axios.post('metamodel_hierarchy/updateMetamodel_hierarchy', params)
        .then(function (response) {
          console.log(response)

        if(response.data.result == true){
          vm.dialogMetaModelModify = false;
          // 修改之后重新获取tree控件的内容
          axios.get('metamodel_hierarchy/getMetamodelPackageTree')
          .then(function (response) {
            if (response.data.result == true) {
              vm.data = response.data.data;
            } else {
              vm = [];
            }
          })
          .catch(function (error) {
            console.log(error);
          });

          vm.$message('修改元模型成功');
        }
        else
        {
          vm.$message('修改元模型失败');
        }
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      attributeAdd(){
        this.dialogAttributeAdd = true;
        this.addAtrribute = {
          name: '',
          description: '',
          type: ''
        }
      },
      // 元模型属性的增删改
      attributeAddPost() {
        let vm =this;
        let params = {
          parentid: vm.$refs.tree.getCurrentKey(),
          name: vm.addAtrribute.name,
          type: vm.addAtrribute.type,
          description: vm.addAtrribute.description
        }
        axios.post('metamodel_datatype/addMetamodel_datatype', params)
        .then(function (response) {
          if (response.data.result == true) {
            vm.dialogAttributeAdd = false;
            // 重新获取表格内容
            let params = {
              id: vm.$refs.tree.getCurrentKey(),
            }
            axios.post('/metamodel_datatype/getMetamodel_datatype', params)
            .then(function (response) {
              console.log(response);
              vm.tableData = response.data.data;
            })
            .catch(function (error) {
              console.log(error);
            });
            vm.$message("新增属性成功");
          } else {
            vm.$message("新增属性失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      attributeDelete(row) {
        let vm =this;
        let params = {
          id: row.id,
        }
        this.$confirm('此操作将永久删除该属性, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除属性
          axios.post('metamodel_datatype/deleteMetamodel_datatype', params)
          .then(function (response) {
            console.log(response);
            if(response.data.result == true){
              vm.$message({
                type: 'success',
                message: '删除成功!'
              });
              // 重新拉取元模型的属性
              let params = {
                id: vm.$refs.tree.getCurrentKey(),
              }
              axios.post('/metamodel_datatype/getMetamodel_datatype', params)
              .then(function (response) {
                console.log(response);
                vm.tableData = response.data.data;
              })
              .catch(function (error) {
                console.log(error);
              });
            }else{
              vm.$message("删除属性失败")
            }
          })
          .catch(function (error) {
            console.log(error);
          });
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      attributeModify(row) {
        console.log(row)
        this.dialogAttributeModify = true;
        this.modifyAtrribute= {
          id: row.id,
          name: row.attribute,
          description: row.description,
          type: row.type
        }
      },

      attributeModifyPost(){
        let vm =this;
        let params = {
          id: this.modifyAtrribute.id,
          name: this.modifyAtrribute.name,
          type: this.modifyAtrribute.type,
          desribe: this.modifyAtrribute.description
        }
        console.log(params)
        axios.post('metamodel_datatype/modifyMetamodel_datatype', params)
        .then(function (response) {
          console.log(response);
          if (response.data.result == true) {
            vm.dialogAttributeModify = false;
            // 重新获取表格内容
            let params = {
              id: vm.$refs.tree.getCurrentKey(),
            }
            axios.post('/metamodel_datatype/getMetamodel_datatype', params)
            .then(function (response) {
              console.log(response);
              vm.tableData = response.data.data;
            })
            .catch(function (error) {
              console.log(error);
            });

            vm.$message("修改属性成功");
          } else {
            vm.$message("修改属性失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });

      },

      // tree控件的点击事件
      handleNodeClick(data) {
        let vm = this;
        let params = {
          id: data.id
        }
        axios.post('/metamodel_datatype/getMetamodel_datatype', params)
        .then(function (response) {
          console.log(response);
          vm.tableData = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });

      }
    },

    data() {
      return {
        options: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData :[],

        // 新增元模型和属性弹框
        dialogMetaModelAdd: false,
        dialogMetaModelModify: false,
        dialogAttributeAdd: false,
        dialogAttributeModify: false,
        // 初始化元模型弹框
        MetaModelAdd: {
          name: '',
          description: '',
          value: '',
        },

        MetaModelModify: {
          name: '',
          description: '',
        },
        formLabelWidth: '140px',

        // 新增属性
        labelPosition: 'right',
        addAtrribute: {
          name: '',
          description: '',
          type: ''
        },
        modifyAtrribute :{
          name: '',
          description: '',
          type: ''
        },
        //
        types: [{
          label: 'String'
        }, {
          label: 'int'
        }, {
          label: 'double'
        }, {
          label: 'float'
        }, {
          label: 'long'
        }, {
          label: 'boolean'
        }]
      };
    }
};


</script>

<style scoped>
.layout-relational{
  padding-left: 10px;
}

.metaModel-add{
  position:relative;
  margin-right: 10px;
}
.metaModel-delete{
  position:absolute;
  margin-right: 10px;
}
.metaModel-modify{
  position:absolute;
  right: 0px;
  margin-right: 10px;
}
.attributeAdd{
  position: absolute;
  right: 0px;
}
.attributeList{
  font-size: 16px;
}
.hint{
  border-style:solid;
  border-width:1px;
}
.dataSource{
	background-color: #EBEEF5;
  height:350px;
  overflow-y: scroll;
}
.elTree {
  font-size: 16px;
	background-color: #EBEEF5;
}
.breadcrumb {
	margin-top: 10px;
	margin-bottom:10px;
}
.des{
	font-size: 18px;
}
.decorationLine{
height:1px;
width:100%;
background:#E4E7ED;
overflow:hidden;
margin-top:20px;
margin-bottom:20px;
}
</style>
